<template>
  <div id="container"></div>
</template>

<script lang="ts">
import {defineComponent, onMounted} from "vue";
import { Graph, Shape } from '@antv/x6';
export default defineComponent({
  setup() {
    const textSize = (fontSize: string,fontFamily: string,text: string) => {
        const span = document.createElement("span");
        const result = {width: 0, height: 0};
        result.width = span.offsetWidth;
        result.height = span.offsetHeight;
        span.style.visibility = "hidden";
        span.style.fontSize = fontSize;
        span.style.fontFamily = fontFamily;
        span.style.display = "inline-block";
        document.body.appendChild(span);
        if(typeof span.textContent != "undefined"){
          span.textContent = text;
        }else{
          span.innerText = text;
        }
        result.width = parseFloat(window.getComputedStyle(span).width) - result.width;
        result.height = parseFloat(window.getComputedStyle(span).height) - result.height;
        return result;
    }
    console.log(textSize("12px","Arial","怎么增加他修改的可适d应1性abc").width)
    const data = {
      // 节点
      nodes: [
        {
          id: 'node1', // String，可选，节点的唯一标识
          x: 0,       // Number，必选，节点位置的 x 值
          y: 0,       // Number，必选，节点位置的 y 值
          width: textSize("12px","Arial","怎么增加他修改的可适d应1性abc").width,   // Number，可选，节点大小的 width 值
          height: 40,  // Number，可选，节点大小的 height 值
          attrs: {
            label: {
              text: '怎么增加他修改的可适d应1性abc',
              fill: 'blue',
              //fontSize: '2em',
              fontSize: '12px',
              textLength:textSize("12px","Arial","怎么增加他修改的可适d应1性abc").width,
            }
          }, // String，节点标签
        },
        {
          id: 'node2', // String，节点的唯一标识
          x: 160,      // Number，必选，节点位置的 x 值
          y: 180,      // Number，必选，节点位置的 y 值
          width: 80,   // Number，可选，节点大小的 width 值
          height: 40,  // Number，可选，节点大小的 height 值
          label: 'world', // String，节点标签
        },
      ],
      // 边
      edges: [
        {
          source: 'node1', // String，必须，起始节点 id
          target: 'node2', // String，必须，目标节点 id
        },
      ],
    };
    let graph: Graph;
    onMounted(() => {
      graph = new Graph({
        container: document.getElementById('container') as HTMLElement,
        width: 800,
        height: 600,
        background: {
          color: '#fffbe6', // 设置画布背景颜色
        },
        grid: {
          size: 10,      // 网格大小 10px
          visible: true, // 渲染网格背景
        },
      });
      const lb = ['red', 'green', 'gray', 'white'];
      const vMap = new Map();
      vMap.set('node1', lb);
      const indexMap = new Map();
      indexMap.set('node1', 0);
      //const pageOfRecMap = new Map();
      indexMap.set('node1', 2);
      graph.fromJSON(data)

      const craftParm = new Shape.HTML({
        x: 0,
        y: 0,
        width: 60,
        height: 39,
        attrs: {
          body: {
            fill: "#EFF5FF",
            opacity: "0.5",
            stroke: "#B2D3FF",
            rx: 5,
            ry: 5,
          },
          label: {
            text: "工艺参数",
            fill: "#3E78CA",
            fontSize: 12,
            refX: '0%', // 向左偏移宽度一半
            refY: '0%',  // 向下偏移高度的 1/4
            x: 0,           // 向左偏移 10px
            y: 0,           // 向上偏移 10px
            textAnchor: 'start',
            textVerticalAnchor: 'top',
            refDy: '1.2em',
            lineHeight: '1.5em', //标识行高
          },
        }
      });

      const deviTypeIcon = new Shape.EmbeddedImage({
            position: {
              x: 50,
              y: 50,
            },
            width: 80,
            height: 80,
            ports: [],
            attrs: {
              label: {
                fontSize: 12,
                fill: 'white', // 文字颜色
                text: '',
                x:0,
                y:0,
              },
              body: {
                fill: 'white',
                stroke: '#f5f5f5',
                strokeWidth: 0,
                refWidth: '100%',  // 矩形宽度为节点宽的一半
                refHeight: '90%', // 矩形高度为节点高度的一半
              },
              image: {
                x: 0,
                y: 0,
                refWidth: '100%',
              }
            },
            //imageUrl: new URL('../../../assets/'+val.remark, import.meta.url).href,
            imageUrl: 'http://39.104.87.244:7000/smartheating/equipicon/ylcgq.svg',
            zIndex: 5,
          });

      craftParm.setAttrByPath('label/text', 'tspan:dfas\r\nsadfasffa')

      const wrap = document.createElement('div') as HTMLDivElement
        wrap.style.color = 'red'
        wrap.style.fontSize = 14 + 'px'
        wrap.style.height = 50+'px'
        wrap.style.width = 50+'px'
        craftParm?.setProp('html', wrap )
        const wrapSpan = document.createElement('span') as HTMLDivElement
        wrapSpan.innerHTML="dsdasdfsdfd"
        wrap.appendChild(wrapSpan)
      graph.addNode(craftParm)
      graph.addNode(deviTypeIcon)
      deviTypeIcon.setAttrByPath('image/xlink:href','http://39.104.87.244:7000/smartheating/equipicon/hrq.svg')
      const view2 = graph.findView(deviTypeIcon)
            if (view2) {
              view2.animate('image', {
                attributeType: 'XML',
                attributeName: 'xlink:href',
                from: 'http://39.104.87.244:7000/smartheating/equipicon/ylcgq.svg',
                to: 'http://39.104.87.244:7000/smartheating/equipicon/hrq.svg',
                dur: '1s',
                repeatCount: 'indefinite',
              })
            }
      // graph.getCellById('node1').transition('attrs/label/fill', 'red', { 
      //   interp: Interp.color,
      //   delay: 3000,
      //   duration: 1000,
      //   timing:'easeInBounce',
      // });

      // graph.getCellById('node1').transition('attrs/label/text', lb[0], { 
      //   interp: (a, b) => {
      //     console.log('====interp1=====',a , b); 
      //     return (time) => {
      //       const rec = lb[indexMap.get('node1')];
      //       const _index = indexMap.get('node1') + 1;
            
      //       console.log('====interp2=====', rec, indexMap.get('node1'));
      //       if(_index >= lb.length) {
      //         indexMap.set('node1', 0);
      //       } else {
      //         indexMap.set('node1', indexMap.get('node1') + 1);
      //       }
      //       return rec;
      //     }
      //   },
      //   delay: 3000,
      //   duration: 5000,
      //   timing:(t) => { 
      //     console.log('=====timing1=======', t);
      //     return t*100000;
      //   },
      // });

      console.log(textSize("20px","Arial","abcdefg"));
      // graph.getCellById('node1');
      console.log(graph.getCellById('node1'))
      const theView = graph.findViewByCell('node1')
      console.log('====theView1=====', theView);
      theView?.animate('body',{
          attributeType: 'XML',
          attributeName: 'fill',
          from: 'red',
          to: 'green',
          dur: '3s',
          repeatCount: 'indefinite',
        })
    })
    return {
    }
  }
})
</script>

//lang="scss"
// .deep(v-line) {
//   overflow: hidden;
// }
<style scoped>
</style>
